import { Component, OnInit } from '@angular/core';
import { NzModalRef, NzMessageService } from 'ng-zorro-antd';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ServiceCusService } from '@core/routes-services/service-cus.service';
import { QCLOUD_DOMAIN, UPLOAD_DOMAIN } from '../../../constant/config';
import { CacheService } from '@core/routes-services/cache.service';

@Component({
  selector: 'app-service-cus-edit',
  templateUrl: './service-cus-edit.component.html',
  styles: [`
    :host ::ng-deep .ant-upload-select-picture-card {
      width: 128px;
      height: 128px;
    }

    :host ::ng-deep .ant-upload-select-picture-card i {
      font-size: 32px;
      color: #999;
    }

    :host ::ng-deep .ant-upload-select-picture-card .ant-upload-text {
      margin-top: 8px;
      color: #666;
    }

    :host ::ng-deep .ant-upload .avatar {
      width: 120px;
      height: 120px;
    }
  `],
})
export class ServiceCusEditComponent implements OnInit {
  entity: any = {};
  validateForm: FormGroup;
  isLoading: boolean = false;

  uploadDomain = UPLOAD_DOMAIN;
  qcloudDomain = QCLOUD_DOMAIN;
  headers: any = {};
  constructor(private fb: FormBuilder,
              private modal: NzModalRef,
              private serviceCusService: ServiceCusService,
              private cacheService: CacheService,
              public message: NzMessageService,
  ) {
  }

  ngOnInit(): void {
    const token: any = this.cacheService.getTokenInfo();
    this.headers = { 'Authorization': token };
    this.validateForm = this.fb.group({
      mainImg: [this.entity.mainImg, [Validators.required]],
      remark: [this.entity.remark, [Validators.required, Validators.maxLength(100)]],
    });
  }

  submitForm(): void {
    if (this.validateForm.invalid) {
      for (const i in this.validateForm.controls) {
        this.validateForm.controls[i].markAsDirty();
        this.validateForm.controls[i].updateValueAndValidity();
      }
    } else {
      this.isLoading = true;
      this.serviceCusService.saveOrUpdateEntity(this.entity.id, this.validateForm.value).then((res) => {
        if (res.status.toString().startsWith('20')) {
          this.modal.close(true);
        } else {
          this.message.warning(res.message);
        }
        this.isLoading = false;
      }, error => {
        this.message.error(error.message ? error.message : error.error);
        this.isLoading = false;
      });
    }
  }
  /**
   * 上传图控件 ng-zorro upload
   *
   * @param {any} file
   * @param {any} fileList
   */
  handleChange({ file, fileList }): void {
    const status = file.status;
    if (status !== 'uploading') {
      // console.log(file, fileList);
    }
    if (status === 'done') {
      this.message.success(`${file.name} 上传成功`);
      let findIdx = fileList.findIndex(w => file.lastModified == w.lastModified);
      fileList[findIdx].imgKey = fileList[findIdx].response.data;
      fileList[findIdx].name = fileList[findIdx].response.data;
      fileList[findIdx].url = this.qcloudDomain + fileList[findIdx].response.data;
      this.entity.mainImg = fileList[findIdx].url;
      this.validateForm.controls.mainImg.setValue(this.entity.mainImg);
    } else if (status === 'error') {
      this.message.error(`${file.name} 上传失败`);
    }
  }
  close() {
    this.modal.destroy();
  }
}
